<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input id="username">
</body>

</html>
<script>
    //键盘事件由用户击打键盘时触发，主要有keydown、keypress、keyup三个事件
    // keydown:按下键盘时触发
    var username = document.getElementById("username");
    // username.onkeydown = function(event){
    //     console.log(event.target.value)
    //     console.log(event.keyCode)
    // }
    //keypress:按下有值的键时触发，即按下Ctrl、Alt、Shift、Meta这样无值的键，这个事件不会触发。
    //对于有值的键，按下时先触发keydown事件，再触发这个事件
    username.onkeypress = function (event) {
        console.log(event.target.value)
        console.log(event.keyCode)
    }
    // keyup: 松开键盘时触发该事件
    // username.onkeyup = function(event){
    //     console.log(event.target.value)
    //     console.log(event.keyCode)
    // }

    // event对象
    //KeyCode唯一标识
    username.onkeyup = function (event) {
        if (event.keyCode === 13) {
            // 回车键的keyCode为13
            console.log("回车键按下")
        }
    }


</script>